<!--
 * new page
 * @author: sunYihui
 * @since: 2024-08-30
 * NewsView.vue
-->
<template>
  <div class="body">
    <div class="title">角色列表</div>
    <Table   ref="userTable" v-bind="tableConfig">
      <!-- //性别处理 -->
      <template #sex="{ scope }">
        <div > {{ scope.row.sex == 1 ? '男' : '女' }}</div>
      </template>
        <!-- 管理楼栋 -->
      <template #building="{ scope }">
        <div v-for="item in scope.row.building" :key="item.id">{{ item.building }}</div>
      </template>
      <template #buttons>    
         <el-button style="margin: 30px 0;" @click="add" type="primary" >添加</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <el-button @click="edit(scope.row)" type="primary" >修改</el-button>
        <el-button @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>
    </Table>
    <Add :editData="editData"  @close="handleClose" v-if="dialogVisible"></Add>
  </div>
</template>
<script lang='ts' setup>
import Add from '../../components/role/Add.vue';
import Table from '../../components/table/TableView.vue'
import { tableConfig } from './administratorrole'
import { ref } from 'vue'

//通过ref获取表格实例来调用写在表格里面的方法
const userTable = ref<any>();

const dialogVisible = ref(false)
const editData=ref<any>();
const add=()=>{

    editData.value={id:0,name:""};
    dialogVisible.value=true;
}
const handleClose=async(val:boolean)=>{
     dialogVisible.value=false;
     val && userTable.value.getData()
}
const edit=(data:any)=>{
    console.log(3433,data);
    
    editData.value=data;
    dialogVisible.value=true;
}

</script>
<style scoped lang="less">
@import url(../../assets/styles/baseCss/base.css);
</style>